<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <title>商品管理</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <a class="navbar-brand" href="${pageContext.request.getContextPath()}/Product?op=manage&page=0&limit=10">商品管理</a>

    <ul class="nav ml-auto" style="margin-right: 150px">
        <c:choose>
            <c:when test="${empty sessionScope.id}">
                <li class="nav-item">
                    <a class="nav-link btn btn-outline-primary"
                       href="${pageContext.request.getContextPath()}/user/login.jsp">登录</a>
                </li>
            </c:when>
            <c:otherwise>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">${sessionScope.id}</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" target="_blank"
                           href="${pageContext.request.getContextPath()}/User?op=modify&id=${sessionScope.id}">修改个人信息</a>
                        <a class="dropdown-item" href="${pageContext.request.getContextPath()}/User?op=logout">登出</a>
                    </div>
                </li>
            </c:otherwise>
        </c:choose>
        <li class="nav-item">
            <a target="_blank" class="nav-link btn btn-outline-primary btn-sm"
               href="${pageContext.request.getContextPath()}/">首页</a>
        </li>
    </ul>

</nav>

<div class="container">
    <div class="card bg-light text-dark">
        <div class="card-body">
            <form class="form-inline float-left">
                <input name="keyword" class="form-control" type="text" placeholder="关键字">
                <input type="hidden" name="op" value="search">
                <button class="btn btn-success" type="submit">搜索</button>
            </form>
            <small id="sm-info" class="text-danger"> ${info}</small>
            <a href="${pageContext.request.getContextPath()}/product/add.jsp" class="btn btn-success float-right">添加</a>
        </div>
    </div>

    <table class="table table-hover">
        <thead>
        <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>商品商标</th>
            <th>商品型号</th>
            <th>商品价格</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${list}" var="product">
        <tr>
            <td>${product.serialNumber}</td>
            <td>${product.name}</td>
            <td>${product.brand}</td>
            <td>${product.model}</td>
            <td>${product.price}</td>
            <td class="text-center">
                <a class="btn btn-warning btn-sm"
                   href="${pageContext.request.getContextPath()}/Product?op=modify&id=${product.productID}">修改</a>
                &nbsp;
                <a class="btn btn-danger btn-sm"
                   href="${pageContext.request.getContextPath()}/Product?op=delete&id=${product.productID}">删除</a>
            </td>
        </tr>
        </c:forEach>
    </table>
    <c:if test="${not empty page}">
        <div class="fixed-bottom">
            <ul class="pagination justify-content-center" style="margin-top: 10px">
                <li id="li-prev" class="page-item"><a class="page-link"
                                                      href="${pageContext.request.getContextPath()}/Product?op=manage&page=${page-1}&limit=10">Prev</a>
                </li>
                <c:forEach var="s" begin="1" end="${count/10+(count%10>0 ? 1 : 0)}">
                    <li id="li-${s}" class="page-item"><a class="page-link"
                                                          href="${pageContext.request.getContextPath()}/Product?op=manage&page=${s-1}&limit=10">${s}</a>
                    </li>
                </c:forEach>
                <li id="li-next" class="page-item"><a class="page-link"
                                                      href="${pageContext.request.getContextPath()}/Product?op=manage&page=${page+1}&limit=10">Next</a>
                </li>
            </ul>
        </div>
    </c:if>
</div>

</div>
<script>
    $("#li-${page+1}").addClass("active");
    <c:if test="${page==0}">
    $("#li-prev").addClass("disabled");
    </c:if>
    <c:if test="${(page+1)*10 >= count}">
    $("#li-next").addClass("disabled");
    </c:if>

    $(document).ready(function () {
        setTimeout(function () {
            $("#sm-info").text("");
        }, 3000);
    });
</script>
</body>
</html>
